<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>酒店管理系统</title>
    <link
      rel="stylesheet"
      href="./dist/css/google.css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"
    />
    <!-- Font Awesome -->
    <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css" />
    <!-- Ionicons -->
    <link
      rel="stylesheet"
      href="https://cdn.bootcdn.net/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"
    />
    <!-- Tempusdominus Bootstrap 4 -->
    <link
      rel="stylesheet"
      href="plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css"
    />
    <!-- iCheck -->
    <link
      rel="stylesheet"
      href="plugins/icheck-bootstrap/icheck-bootstrap.min.css"
    />
    <!-- JQVMap -->
    <link rel="stylesheet" href="plugins/jqvmap/jqvmap.min.css" />
    <!-- 主题样式 -->
    <link rel="stylesheet" href="dist/css/adminlte.min.css" />
    <!-- overlayScrollbars -->
    <link
      rel="stylesheet"
      href="plugins/overlayScrollbars/css/OverlayScrollbars.min.css"
    />
    <!-- Daterange picker -->
    <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css" />
    <!-- summernote -->
    <link rel="stylesheet" href="plugins/summernote/summernote-bs4.min.css" />
    <link
      rel="stylesheet"
      href="./layuimini-v2/lib/layui-v2.6.3/css/layui.css"
      media="all"
    />
    <!-- <link rel="stylesheet" href="./layuimini-v2/css/public.css" media="all"> -->
  </head>
  <body class="hold-transition sidebar-mini">
    <!-- Preloader -->
    <!--   <div class="preloader flex-column justify-content-center align-items-center">
    <img class="animation__shake" src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
  </div> -->

    <!-- Content Wrapper. 包含页面内容 -->

    <div class="layuimini-container">
      <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
          <legend>搜索信息</legend>
          <div style="margin: 10px 10px 10px 10px">
            <form class="layui-form layui-form-pane" action="">
              <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label">姓名</label>
                  <div class="layui-input-inline">
                    <input
                      type="text"
                      name="username"
                      id="sname"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label">性别</label>
                  <div class="layui-input-inline">
                    <input
                      type="text"
                      name="gender"
                      id="sgender"
                      autocomplete="off"
                      class="layui-input"
                    />
                  </div>
                </div>
                <!-- <div class="layui-inline">
                              <label class="layui-form-label">用户城市</label>
                              <div class="layui-input-inline">
                                  <input type="text" name="city" autocomplete="off" class="layui-input">
                              </div>
                          </div>
                          <div class="layui-inline">
                              <label class="layui-form-label">用户职业</label>
                              <div class="layui-input-inline">
                                  <input type="text" name="classify" autocomplete="off" class="layui-input">
                              </div>
                          </div> -->
                <div class="layui-inline">
                  <button
                    type="submit"
                    class="layui-btn layui-btn-primary"
                    lay-submit
                    lay-filter="data-search-btn"
                  >
                    <i class="layui-icon"></i> 搜 索
                  </button>
                </div>
              </div>
            </form>
          </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
          <div class="layui-btn-container">
            <button
              class="layui-btn layui-btn-normal layui-btn-sm data-add-btn"
              lay-event="add"
            >
              添加
            </button>
            <button
              class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn"
              lay-event="delete"
            >
              删除
            </button>
          </div>
        </script>

        <table
          class="layui-hide"
          id="currentTableId"
          lay-filter="currentTableFilter"
        ></table>

        <script type="text/html" id="currentTableBar">
          <a
            class="layui-btn layui-btn-normal layui-btn-xs data-count-edit"
            lay-event="edit"
            >编辑</a
          >
          <a
            class="layui-btn layui-btn-xs layui-btn-danger data-count-delete"
            lay-event="delete"
            >删除</a
          >
        </script>
      </div>
    </div>
    <!-- jQuery -->
    <script src="./plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="./plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- jsGrid -->
    <script src="./plugins/jsgrid/demos/db.js"></script>
    <script src="./plugins/jsgrid/jsgrid.min.js"></script>
    <script src="./plugins/jsgrid/i18n/jsgrid-zh-cn.js"></script>
    <!-- AdminLTE App -->
    <script src="./dist/js/adminlte.min.js"></script>

    <script
      src="./layuimini-v2/lib/layui-v2.6.3/layui.js"
      charset="utf-8"
    ></script>
    <script>
      //本地存储user，。没有不能打开
      // var adminuser=localStorage.getItem('adminuser');
      // if(user==null){
      //     alert("请登录")
      //     //跳转到登录页面
      // }
      //
      layui.use(["form", "table"], function () {
        var $ = layui.jquery,
          form = layui.form,
          table = layui.table;

        table.render({
          elem: "#currentTableId",
          // url: "http://douzi.wiki:9000/GROW/api/room?page=9&limit=0",
          url: "https://douzi.wiki:7000/GROW/api/room/page",
          toolbar: "#toolbarDemo",
          defaultToolbar: [
            "filter",
            "exports",
            "print",
            {
              title: "提示",
              layEvent: "LAYTABLE_TIPS",
              icon: "layui-icon-tips",
            },
          ],
          //
          cols: [
            [
              { type: "checkbox", width: 50 },
              { field: "id", width: 100, title: "用户ID", sort: true },
              { field: "roomNumber", width: 80, title: "房间号" },
              { field: "isEmpty", width: 100, title: "是否为空" },
              { field: "describe", minwidth: 120, title: "描述" },
              { field: "troomTypeId", width: 100, title: "所属房型" },
              // {
              //   field: "gender",
              //   width: 80,
              //   title: "性别",
              //   sort: true,
              //   templet: function (d) {
              //     console.log(d);
              //     if (d.gender == 1) return "男";
              //     else return "女";
              //   },
              // },
              // { field: "age", width: 80, title: "年龄", sort: true },
              // {
              //   field: "status",
              //   width: 130,
              //   title: "用户账号状态",
              //   sort: true,
              //   templet: function (d) {
              //     console.log(d);
              //     if (d.status == 1) return "正常";
              //     else return "被封禁";
              //   },
              // },
              // { field: "loginTime", width: 180, title: "用户登录时间" },
              // { field: "logoutTime", width: 180, title: "用户退出时间" },
              // {
              //   field: "tvipMemberId",
              //   width: 103,
              //   title: "用户会员ID",
              //   sort: true,
              // },
              // {field: 'score', width: 80, title: '评分', sort: true},
              // {field: 'classify', width: 80, title: '职业'},
              // {field: 'wealth', width: 135, title: '财富', sort: true},
              {
                title: "操作",
                minWidth: 80,
                toolbar: "#currentTableBar",
                align: "center",
              },
            ],
          ],
          page: true,
          skin: "line",
        });

        // 监听搜索操作
        form.on("submit(data-search-btn)", function (data) {
          var result = JSON.stringify(data.field);
          layer.alert(result, {
            title: "最终的搜索信息",
          });
          console.log(result);

          //执行搜索重载
          table.reload(
            "currentTableId",
            {
              url: "https://douzi.wiki:7000/GROW/api/user?page=1&limit=2",
              page: {
                curr: 1,
              },
              where: {
                name: $("#sname").val(),
                gender: $("#sgender").val(),
              },
            },
            "data"
          );

          return false;
        });

        /**
         * toolbar监听事件
         */
        table.on("toolbar(currentTableFilter)", function (obj) {
          if (obj.event === "add") {
            // 监听添加操作
            var index = layer.open({
              title: "添加用户",
              type: 2,
              shade: 0.2,
              maxmin: true,
              shadeClose: true,
              area: ["80%", "80%"],
              content: "./HotelAdmin-Users-addUsers.html",
            });
            $(window).on("resize", function () {
              layer.full(index);
            });
          } else if (obj.event === "delete") {
            // 监听删除操作
            var checkStatus = table.checkStatus("currentTableId"),
              data = checkStatus.data;
            layer.alert(JSON.stringify(data));
          }
        });

        //监听表格复选框选择
        table.on("checkbox(currentTableFilter)", function (obj) {
          console.log(obj);
        });

        table.on("tool(currentTableFilter)", function (obj) {
          var data = obj.data;
          console.log(data);
          localStorage.setItem("editUser", JSON.stringify(data));
          alert(data);

          if (obj.event === "edit") {
            var index = layer.open({
              title: "编辑用户",
              type: 2,
              shade: 0.2,
              maxmin: true,
              shadeClose: true,
              area: ["80%", "80%"],
              //   content: 'layuimini-v2/page/table/edit.html',
              content: "./HotelAdmin-editUsers.html",
            });
            $(window).on("resize", function () {
              layer.full(index);
            });
            return false;
          } else if (obj.event === "delete") {
            layer.confirm("真的删除行么", function (index) {
              obj.del();
              //显示对象
              alert(obj);
              layer.close(index);
              //         $.ajax({
              // 	type: "DELETE",
              // 	contentType:"application/json",
              // 	dataType: 'json',
              // 	data:JSON.stringify(data),
              // 	url: "http://www.demo.com/test/test",
              // 	success: function(data) {
              // 			console.log(data)
              // 	}
              // });
            });
          }
        });
      });
    </script>
  </body>
</html>
